﻿@using Storage.Mapping.Bucket
@model IEnumerable<BucketMapping>
@{
    ViewBag.Title = "Bucket列表";
}
<h1>@ViewBag.Title</h1>
<hr />
<div class="row">
    <div class="col-sm-12">
        @PermissionAjaxRouteLinkIcon("添加Bucket", "editBucket", null, new { @class = "btn btn-sm btn-pink " }, new { @class = "glyphicon glyphicon-plus" })
    </div>
</div>
<div class="space-2"></div>
<div class="row">
    <div class="col-sm-12">
        <div class="panel panel-default">
            <div class="panel-body">
                @using (Html.BeginRouteForm("bucketIndex", new { }, FormMethod.Get, new { @class = "form-inline" }))
                {

                }
            </div>
        </div>
    </div>
</div>
@if (Model != null)
{
    var loList = Model.ToLookup<BucketMapping, string>(o => o.AppStorage.Name).ToList();
    <div class="row">
        <div class="col-sm-12">
            <table id="user_datatable" class="table table-striped table-bordered table-hover dataTable no-footer">
                <thead>
                    <tr>
                        <th width="250px">应用</th>
                        <th width="150px"></th>
                        <th width="350px">尺寸</th>
                        <th width="150px;"></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in loList)
                    {
                        int index = 1;
                        foreach (var bucket in item)
                        {
                            <tr>
                                @if (index == 1)
                                {
                                    <td rowspan="@(item.Count())">@item.Key</td>
                                }
                                <td>@bucket.Name</td>
                                <td>
                                    @if (bucket.BucketCutList != null)
                                    {
                                        foreach(var cut in bucket.BucketCutList)
                                        {
                                            <span style="border:1px solid #d1d1d1; padding:2px 5px;">@cut.Value <i data-href="@Url.RouteUrl("deleteCut", new { id = cut.Id  })" class="glyphicon glyphicon-remove text-danger btnDelCut"></i></span>
                                        }
                                    }
                                </td>
                                <td>@bucket.CreationTime.ToString("F")</td>
                                <td>
                                    <a class="btn btn-default btn-xs btnAddCut" href="@Url.RouteUrl("editBucketCut", new { bucketId = bucket.Id })">添加尺寸</a>
                                </td>
                            </tr>
                            index++;
                        }
                    }
                </tbody>
            </table>
        </div>
    </div>
}
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加剪裁尺寸</h4>
            </div>
            <div class="modal-body"> 
            </div> 
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.btnAddCut').click(function (e) {
            e.preventDefault();
            $('#myModal').modal();
            $.get(this.href, function (html) {
                $('#myModal .modal-body').html(html);
            })
        });
        $('.btnDelCut').click(function () {
            var _this = $(this);
            $.modal.confirm('您定要删除？', function () {
                $.get(_this.data('href'), function (data) {
                    $.modal.gritter(data, function () {
                        _this.parent('span').remove();
                    });
                });
            })
        });
    });
</script>














